<template>
    <view class="content">
        <view class="application">
            <view class="tabr" >
                <view :class="{on:typeClass=='valid'}" 
                    @tap="switchType('valid')">待处理（11）
                </view>
                <view :class="{on:typeClass=='invalid'}"  
                    @tap="switchType('invalid')">已处理（22）</view>
            </view>
            <uni-swipe-action class="list" :options="options">
                <uni-list-item title="11" :show-arrow="false"></uni-list-item>
            </uni-swipe-action>
            <uni-swipe-action class="list" :options="options">
                <uni-list-item title="11" :show-arrow="false"></uni-list-item>
            </uni-swipe-action>
            <uni-swipe-action class="list" :options="options">
                <uni-list-item title="11" :show-arrow="false"></uni-list-item>
            </uni-swipe-action>
            <uni-swipe-action class="list" :options="options">
                <uni-list-item title="11" :show-arrow="false"></uni-list-item>
            </uni-swipe-action>
            <!-- <view class="one">
                <view class="title-p">
                    <text class="text little-title" >任务</text>
                </view>
                <view class="task">
                    <view class="task-view">
                        <text class="num" >10</text>
                        <text class="text" >待处理</text>
                    </view>
                    <view class="task-view">
                        <text class="num" >20</text>
                        <text class="text" >已处理</text>
                    </view>
                </view>
            </view> -->
        </view>
    </view>
</template>

<script>
    import uniSwipeAction from "@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue"
    import {appList} from '../../constants/appData';
    import uniListItem from '@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue'
    import uniGrid from "@dcloudio/uni-ui/lib/uni-grid/uni-grid.vue"
    import uniGridItem from "@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item.vue"
    import uniIcon from "@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue"
    export default {
        data () {
            return {options: [{
                text: '取消',
                style: {
                    backgroundColor: '#007aff'
                }
            }, {
                text: '确认',
                style: {
                    backgroundColor: '#dd524d'
                }
            }],
				typeClass:'valid',
                appList: appList
            }
        },
        computed: {
        
        },
        methods: {
			switchType(type){
				if(this.typeClass==type){
					return ;
				}
				uni.pageScrollTo({
					scrollTop:0,
					duration:0
				})
				this.typeClass = type;
				this.subState = this.typeClass==''?'':'show'+type;
				setTimeout(()=>{
					this.oldIndex = null;
					this.theIndex = null;
					this.subState = this.typeClass=='valid'?'':this.subState;
				},200)
			},
        },
        components: {
            uniGridItem,
            uniGrid,
            uniIcon,
            uniSwipeAction,
            uniListItem
        },
    }
</script>

<style lang="scss" scoped>
.application{
    height: 100%;
	.tabr{
		background-color: #fff;
		width: 94%;
		height: 95upx;
		padding: 0 3%;
		border-bottom: solid 1upx #dedede;
        display: flex;
		view{
			width: 50%;
			height: 90upx;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
			color: #999;
            display: flex;
		}
		.on{
			color: #f06c7a;
		}
		.border{
			height: 4upx;
			background-color: #f06c7a;
			transition: all .3s ease-out;
			&.invalid{
				transform: translate3d(100%,0,0);
			}
		}
		
	}
    .list{
        .uni-list-item--hover{
            background: #fff;
        }
    }
    .one{
        background: #fff;
        margin-bottom: 30upx;
        .task{
            .task-view{
                display: inline-block;
                width: 50%;
                padding: 50upx 0;
                >text{
                    display: block;
                    text-align: center;
                    color:#2196f3;
                }
                .num{
                    font-size: 35upx;
                    margin-bottom: 20upx;
                }
                .word{
                    font-size: 60upx;
                }
            }
        }
    }
}
</style>
